/**
* 功能描述：功能日历
* @author jin xiaohang
*
* @date 2022/9/27 15:43
* @version 1.0
*/
<template>
    <div class="yw-calendar">
        <div class="yw-calendar-header">
            <div>
                <input type="text" />
            </div>
            <div>
                <input type="text" />
            </div>
            <div>
                <input type="text"  />
            </div>
        </div>
        <div class="yw-calendar-main">
            <div class="yw-calendar-main-body">
                <table class="yw-calendar-main-table">
                    <thead>
                        <tr role="row">
                            <th role="columnheader" class="yw-calendar-main-table-column-header">
                                <span class="yw-calendar-main-table-column-header-inner">一</span>
                            </th>
                            <th role="columnheader" class="yw-calendar-main-table-column-header">
                                <span class="yw-calendar-main-table-column-header-inner">二</span>
                            </th>
                            <th role="columnheader" class="yw-calendar-main-table-column-header">
                                <span class="yw-calendar-main-table-column-header-inner">三</span>
                            </th>
                            <th role="columnheader" class="yw-calendar-main-table-column-header">
                                <span class="yw-calendar-main-table-column-header-inner">四</span>
                            </th>
                            <th role="columnheader" class="yw-calendar-main-table-column-header">
                                <span class="yw-calendar-main-table-column-header-inner">五</span>
                            </th>
                            <th role="columnheader" class="yw-calendar-main-table-column-header">
                                <span class="yw-calendar-main-table-column-header-inner">六</span>
                            </th>
                            <th role="columnheader" class="yw-calendar-main-table-column-header">
                                <span class="yw-calendar-main-table-column-header-inner">日</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="yw-calendar-main-table-body">
                        <tr role="row">
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">01</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">02</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">03</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">04</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">05</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">06</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">07</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                        </tr>
                        <tr role="row">
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">08</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">09</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">10</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">11</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-selected-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">12</div>
                                    <div class="yw-calendar-main-table-content">
                                        <ul>
                                            <li>
                                                <span>
                                                    <span class="yw-calendar-main-table-cell-dot yw-calendar-main-table-cell-dot-warning"></span>
                                                    <span class="yw-calendar-main-table-cell-text">This is warning event</span>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <span class="yw-calendar-main-table-cell-dot yw-calendar-main-table-cell-dot-success"></span>
                                                    <span class="yw-calendar-main-table-cell-text">This is success event</span>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <span class="yw-calendar-main-table-cell-dot yw-calendar-main-table-cell-dot-danger"></span>
                                                    <span class="yw-calendar-main-table-cell-text">This is danger event</span>
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">13</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">14</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                        </tr>
                        <tr role="row">
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">15</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">16</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">17</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">18</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">19</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">20</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">21</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                        </tr>
                        <tr role="row">
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">22</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">23</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">24</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">25</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">26</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">27</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">28</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                        </tr>
                        <tr role="row">
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">29</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">30</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">31</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">01</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">02</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">03</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">04</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                        </tr>
                        <tr role="row">
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">05</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">06</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">07</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">08</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">09</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">10</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                            <td class="yw-calendar-main-table-cell yw-calendar-main-table-next-month-cell">
                                <div class="yw-calendar-main-table-date">
                                    <div class="yw-calendar-main-table-value">11</div>
                                    <div class="yw-calendar-main-table-content"></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "YwCalendar"
}
</script>

<style lang="scss" scoped>

</style>